<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{ title}} </h2>
        <div v-if="false">
            <h2 @click="changeCount(111)">count --- {{count }}</h2>
            <button v-on:click.once="count++">countADD</button>
            <button @click="greeting">问候一下</button>
            <button @click="getevent('你在睡觉吗?',$event)">说定什么</button>
            <div @click ="parentclick">
                我们是最棒的哦-wh2116
                <p @click.stop="funcOne">Vue is so easy????</p>
                <p @click.prevent="funcTwo">这几天千万要把Vue API 速记 </p>
                <p>wh2116 - daydayup </p>
            </div>
            <p>
                <input type="text" placeholder="keyup" @keyup.enter.space.up.down.left.right ="getKeycode($event)">
            </p>
            <p>
                <input type="text" placeholder="keydown" @keydown.13.32.40.39.38.37 ="getKeycode($event)">
            </p>
            <p>
                <input type="text" placeholder="keypress" @keypress.enter.32 ="getKeycode">
            </p>
            <h2>msg --- {{msg}}</h2>
            <p> 
                <input type="text" :value="msg" @input="changeMsg">
                <input type="text" :value="msg" @change="changeMsg">
            </p>
            <div class="static a b c" @mousemove="getData" >
                mousemove
            </div>
            <div class="static a b c" @touchmove="getData" >
                touch
            </div>
        </div>
        
        <div>
            <h2>Vue 过滤器 (文本格式化 )</h2>
            <h2>word - {{word | upper}}</h2>
            <h2 :data-word="word | lower " >word - {{word | lower}}</h2>
            <h2>num --- {{num | fixed(6) }}</h2>
            <h2>time -- {{time | dateFormat}}</h2>
            <h2>n --- {{n | toString(16)}}</h2>
            <h2>tel -- {{tel | telFormat('')}}</h2>
            <h2>tel -- {{tel | telFormat2 }}</h2>
            <h2>money -- {{money | currency('$',4)}}</h2>
            <h2>money -- {{money | currency2('$',4)}}</h2>
        </div>

    </div>
    <script>
        // 全局的过滤器 
        Vue.filter('upper',(value)=>{
            if(!value) return value
            return value.toUpperCase()
        })
        Vue.filter('fixed',(value,n=2)=>{
            if(!value) return value;
            return value.toFixed(n)
        })
        Vue.filter("dateFormat",(value)=>{
            if(!value) return value;
            var time = new Date(value)
            var year = time.getFullYear()
            var month = time.getMonth() + 1
            var day = time.getDate()
            var hour = time.getHours()
            var min = time.getMinutes()
            var sec = time.getSeconds()
            return `${year}-${month}-${day} ${hour}:${min}:${sec}`
        })

        // 进制转化
        // 255 / 10 = 25 - 5
        // 25  / 10 =  2 - 5
        // 2   / 10 =  0 - 2 
        // 255 / 8 = 31 - 7 
        // 31  / 8 = 3  - 7
        // 3   / 8 = 0  - 3 
        Vue.filter("toString",(value,n=10)=>{
            if(!value) return value;
            return value.toString(n)  
        })

        Vue.filter('telFormat',(value,str='-')=>{
            if(!value)  return value;
            value = value.toString().split('')
            value.splice(3,0,str)
            value.splice(8,0,str)
            console.log(value)
            return value.join('')
        })
        Vue.filter('telFormat2',(value)=>{
            if(!value)  return value;
            value = value.toString().split('')
            var one = value.slice(0,3)
            var two = value.slice(7,11);
            console.log(value)
            return one.join("")+"****"+two.join("")
        })

        // 货币过滤器  currency 
        Vue.filter('currency',(value,type='¥',n=2)=>{
            if(!value) return value;
            value = value.toFixed(n)
            value = value.split(".")
            var zheng = value[0]
            var xiao = value[1]
            zheng = zheng.split('').reverse()
            zheng = zheng.map((item,index)=>{
                if(index%3==0&&index!=0){
                    item = item + ','
                }
                return item;
            })
            return type + zheng.reverse().join("")+"."+xiao;
        })
        Vue.filter('currency2',(value,type="¥",n=2)=>{
            if(!value) return value;
            return type +  value.toLocaleString("en",{
                minimumFractionDigits:2,    // 最少多少位小数
                maximumFractionDigits:2     // 最多多少位小数
            })
        })
        const vm = new Vue({
            data:{
                title:"v-on 事件绑定",  
                count:1000,
                msg:"wh2116-daydayup",
                word:"WH2116- Word Hard For Offer ",
                num:1314.520,
                time:new Date(),
                n:255,
                tel:18012341245,
                money:118012322313323.1231000
            },
            // 局部过滤器
            filters:{
                lower(value){
                    if(!value) return value;
                    return value.toLowerCase()
                }
            },
            methods:{
                getKeycode(e){
                    console.log(e.keyCode)
                },
                getData(e){
                    console.log(e)
                },
                changeMsg(e){
                    this.msg = e.target.value 
                },
                changeCount(n){
                    this.count+=n;
                },
                greeting(e){
                    console.log("周末去看樱花... greeting")
                    console.log(e) 
                },
                getevent(msg,event){
                    console.log(event)
                },
                parentclick(){
                    console.log("parentclick - parentclick 父点击 - self ")
                },
                funcOne(){
                    console.log('stop - stop = 阻止事件冒泡')
                },
                funcTwo(){
                    console.log('funcTwo - funcTwo = 一定不会阻止事件冒泡')
                }
            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
               
               
            }
        }).$mount("#app")


    </script>

    <!-- 
        用特殊变量 $event
        函数调用时候的参数 是 实参
        函数定义时候的参数 是 形参 

        $event vue 提供的事件对象 参数 

        事件修饰符
        event.preventDefault()  阻止浏览器的默认事件
        event.stopPropagation()  阻止事件冒泡 

        v-on 提供了事件修饰符 
        .stop        阻止单击事件继续传播  
        .prevent     阻止浏览器的默认事件  
        .capture     
        .self
        .once        这个事件只能触发一次 
        .passive

        按键修饰符   键盘事件 (键盘码)
        enter    13 
        right    37 
        left
        space     32    
        up
        down 

        v-on:click  @click       
        input 
        change
        click
        dbclick
        keyup
        keydown
        keypress
        mousemove
        mousedown
        mouseup
        mouseenter
        mouserleave 
        touchstart   后面再讲 手机端的触摸事件 
        touchmove
        touchend

        原生绑定事件 (DOMO级事件  DOM2级 事件 )
        onclick="do()"  DOM0  
        document.getElementyById("box").onclick = fn;
        addEventListener("click",fn,false/true)  默认 false  false 冒泡   true 捕获   DOM2 
        removeEventListener("click")

        jquery 绑定事件 
        on  /  off   $('.box').on('click')
        bind  /  unbind  $('.box').bind('click')
        click()

        事件委托   ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去)
        $(parent).on('click',child,fn);    
        $(parent).delegate(child,'click',fn);   // 委托 

        过滤器  filter 
        Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化  (日期格式 货币格式)
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 
        “管道”符号指示   |
        
        Vue.filter 全局过滤器 
        filters 局部过滤器 

     -->
    
</body>
</html>